<!--
 * @description: 
 * @Date: 2023-05-24 12:25:05
 * @example: 
 * @params: 
-->
<template>
  <div class="Container">
    <div class="login_left">
      <div class="sketchfab-embed-wrapper">
        <!-- <iframe
          id="landing-model"
          title="A 3D model of a shoe"
          class="hero__iframe"
          width="350"
          height="350"
          src="https://sketchfab.com/models/99bfe75ebd734fa3832a63e02e2cacf7/embed?annotations_visible=0&amp;autospin=-0.1&amp;autostart=1&amp;camera=0&amp;double_click=0&amp;internal=1&amp;max_texture_size=1024&amp;orbit_constraint_pan=1&amp;orbit_constraint_zoom_in=40&amp;orbit_constraint_zoom_out=60&amp;preload=1&amp;scrollwheel=0&amp;sound_enable=0&amp;transparent=1&amp;ui_animations=0&amp;ui_annotations=0&amp;ui_ar=1&amp;ui_ar_help=0&amp;ui_color=white&amp;ui_fadeout=0&amp;ui_fullscreen=1&amp;ui_help=0&amp;ui_infos=0&amp;ui_inspector=0&amp;ui_settings=0&amp;ui_stop=0&amp;ui_theatre=0&amp;ui_theme=dark&amp;ui_vr=0&amp;ui_watermark=0"
          frameborder="0"
          allow="autoplay; fullscreen; xr-spatial-tracking"
          allowfullscreen=""
          mozallowfullscreen="true"
          webkitallowfullscreen="true"
          xr-spatial-tracking="true"
          execution-while-out-of-viewport="true"
          execution-while-not-rendered="true"
          web-share="true"
        ></iframe> -->
      </div>
      <div class="content">
        <!-- <h2 class="title">Welcome to xxx Plaform</h2>
        <p class="desc">
          Access to the most powerfull tool in the entire design and web industry.
        </p>
        <p class="about">
          Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
          minus id quod maxime placeat facere possimus, omnis voluptas assumenda est,
          omnis dolor repellendus.
        </p> -->
      </div>
    </div>
    <div class="login_right">
      <div class="login_Container" v-if="!showForget">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="resetForm()">
          <el-tab-pane label="Login" name="first">
            <!-- Login_form  -->
            <el-form
              :model="formInline"
              :rules="Loginrules"
              ref="loginFormRef"
              class="Login_form"
            >
              <el-form-item prop="email">
                <el-input
                  v-model="formInline.email"
                  clearable
                  placeholder="E-mail Address"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="formInline.password"
                  type="password"
                  show-password
                  placeholder="Password"
                />
              </el-form-item>
              <el-form-item class="code_item" prop="code">
                <el-input
                  v-model="formInline.code"
                  clearable
                  placeholder="code"
                  class="code"
                />
                <div
                  class="verification"
                  v-html="verification.codeSVG"
                  @click="handlegetAuthCode"
                ></div>
              </el-form-item>
              <el-form-item class="btn_item">
                <el-button
                  type="primary"
                  @click="handleLoginAsync(loginFormRef)"
                  class="login_btn"
                  >Login</el-button
                >
                <span class="forget" @click="handleOpenForget">Forget password?</span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="Register" name="second">
            <!-- Register_form -->
            <el-form :model="RegisterForm" ref="registerRef" class="Login_form">
              <el-form-item>
                <el-input
                  v-model="RegisterForm.tenantName"
                  clearable
                  placeholder="Nick Name"
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="RegisterForm.tenantEmail"
                  placeholder="E-mail Adress"
                />
                <span class="email_code">Send Code</span>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="RegisterForm.password"
                  type="password"
                  show-password
                  placeholder="Password"
                />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="RegisterForm.confirmPassword"
                  type="password"
                  show-password
                  placeholder="Confirm Password"
                />
              </el-form-item>
              <el-form-item class="btn_item">
                <el-button type="primary" @click="onSubmit" class="login_btn"
                  >Register</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="login_Container forget" v-if="showForget">
        <div class="forfget_coc">
          <div class="title">
            <h2>Password Reset</h2>
            <span @click="showForget = false">Back</span>
          </div>
          <p>
            To reset your password, enter the email address you use to sign in to iofrm
          </p>
          <el-input v-model="resetEmail" clearable placeholder="E-mail Address" />
          <el-button type="primary" @click="onSubmit" class="login_btn"
            >Send Reset Link</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { GetAuthCodeAsync, LoginAsync } from "../service/index";
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/index.js'
const UserStore = useUserStore()
const userRouter = useRouter()
const activeName = ref("first");
const showForget = ref(false);
const loginFormRef = ref(null);
const registerRef = ref(null);


const Loginrules = reactive({
  email: [{ required: true, message: "Please input email", trigger: "blur" }],
  password: [{ required: true, message: "Please input password", trigger: "blur" }],
  code: [{ required: true, message: "Please input code", trigger: "blur" }],
});

const formInline = reactive({
  email: "",
  password: "",
  code: "",
});

const RegisterForm = reactive({
  tenantName: "",
  tenantEmail: "",
  password: "",
  confirmPassword: "",
  emailCode: "",
});

const verification = reactive({
  code: "",
  codeSVG: "",
});

const resetEmail = ref("");

const resetForm = () => {
  loginFormRef.value.resetFields()
  
};
const handleOpenForget = () => {
  showForget.value = true;
};

// 请求验证码
const handlegetAuthCode = () => {
  GetAuthCodeAsync().then((res) => {
    verification.code = res.data.text;
    verification.codeSVG = res.data.data;
    console.log(res);
  });
};


// 登录
const handleLoginAsync = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(formInline.code, verification.code);
      if (formInline.code.toLowerCase() === verification.code.toLowerCase()) {
        const query = {
          tenantEmail: formInline.email,
          tenantPass: formInline.password,
        };
        LoginAsync(query).then((res) => {
          if(res.isSuccess){
            ElMessage.success("welcom to xxx plaform");
            hadnleSendMessage(res)
          }
        }).catch(err=>{
          hadnleSendMessage(res= {},err)
        });
      } else {
        ElMessage.error("verification code was been wrong!");
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
/** 添加微前端登录判断方式 */
const hadnleSendMessage = (res, err) => {
  if (window.self === window.top) { // 如果检测无被嵌套则正常逻辑 则存入 pinia 
    const { token, data } = res;
    UserStore.$patch((state) => {
      state.USERINFO = data?.tenantInfo,
      state.tenantId = data?.tenantInfo?.tenantId,
      state.token = token
    })
    userRouter.push("/Main")
  } else {
    // 如果嵌套 postMessage 子传父
    window.parent.postMessage(
      {
        cmd: "send_token",
        params: {
          data,
          token,
          err: err ? err : ""
        },
      },
      "*"
    );
  }
};

onMounted(() => {
  handlegetAuthCode();
});
</script>
<style lang="less" scoped>
.Container {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  background: url(../../assets/login_bg.jpg);
  .login_left {
    color: #ffff;
    font-family: "Lato";
    width: 70%;
    height: 100vh;
    // background-color: #152733;
    position: relative;
    .sketchfab-embed-wrapper {
      position: absolute;
      right: 0;
    }
    .content {
      margin-top: 250px;
      margin-left: 50px;
      // border: 2px solid red;
      .title {
        margin-top: 100px;
      }
      .desc {
        margin-top: 60px;
      }

      .about {
        margin-top: 20px;
        line-height: 25px;
      }
    }
  }
  .login_right {
    width: 40%;
    background: linear-gradient(180deg,rgb(1,39,96) 0%,rgba(1,39,96,.9) 50%,rgba(0,0,0,.95) 100%);
    position: relative;
    .login_Container {
      width: 400px;
      height: 275px;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      .Login_form {
        .el-form-item__content {
          .el-input {
            height: 43px !important;
          }
          .email_code {
            position: absolute;
            right: 20px;
            font-weight: bold;
            cursor: pointer;
            line-height: 2px;
            color: #16cccc;
            // &:hover {
            //   color: #79bbff;
            // }
          }
        }
        .code_item {
          .el-form-item__content {
            display: flex;
            justify-content: space-between;
            .code {
              width: 60%;
            }
            .verification {
              width: 35%;
              margin-left: 10px;
            }
          }
        }
        .btn_item {
          display: flex;
          align-items: center;
          .forget {
            margin-left: 20px;
            color: #409eff;
            font-weight: 400;
            cursor: pointer;
            &:hover {
              color: #79bbff;
            }
          }
        }
        .login_btn {
          width: 95px !important;
          background-color: #16cccc;
          border: none;
        }
      }
      .forfget_coc {
        display: flex;
        flex-direction: column;
        .title {
          display: flex;
          color: #fff;
          justify-content: space-between;
          span {
            color: #152733;
            cursor: pointer;
          }
        }
        p {
          color: #fff;
          font-size: 14px;
        }
        .el-input {
          margin-top: 30px;
          height: 43px !important;
        }
        .login_btn {
          margin-top: 30px;
          // font-weight: bold;
          background-color: #16cccc;
          border: none;
        }
      }
    }
  }
}

</style>
<style lang="less">
.el-tabs__nav-wrap::after {
  width: 0 !important;
}
.el-tabs__content {
  overflow:inherit
}
.el-tabs__item {
  font-family: "Lato";
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
}
.el-input__wrapper {
  background: rgba(255,255,255,.1);
  box-shadow: none !important;
  border-radius: 4px;
}
.el-input__wrapper.is-focus{
  /* border-color: #16cccc !important; */
  box-shadow: 0 0 6px 1px #16cccc !important;
}
</style>
